<template>
  <div class="articleTag" :id="'articleTag' + id" :name="'articleTag' + id">
    <div id="arthead">
      <!-- <span @click="linkClick" class="title"></span> -->

      <img :src="this.$config.serverUrl + image" /><router-link
        :to="{
          name: 'article',
          params: { id: id }
        }"
        class="title"
        >{{ title }}</router-link
      >
    </div>
    <div id="artContent">{{ digest }}</div>
    <div id="artFooter">
      <span
        >@ {{ this.$author }} {{ createTime }}
        <router-link
          :to="{
            name: 'writeBlog',
            query: { id: id }
          }"
          >编辑</router-link
        >
      </span>
      <span>
        <div><Icon type="md-happy" />{{ support }}</div>
        <div><Icon type="ios-chatbubbles-outline" />{{ comment }}</div>
        <div><Icon type="ios-eye-outline" />{{ visited }}</div>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: [
    'title',
    'createTime',
    'support',
    'comment',
    'visited',
    'digest',
    'id',
    'articleTypeId'
  ],
  data() {
    return {
      image: ''
    }
  },
  methods: {},
  created() {},
  mounted() {
    setTimeout(() => {
      this.image = this.$store.state.articleTypeDic[this.articleTypeId].image
    }, 50)
  },
  watch: {}
}
</script>
<style lang="scss">
.articleTag {
  height: 200px;
  width: 70%;
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 0 3px rgba(100, 100, 100, 0.3);
  margin: 20px;
  z-index: 2;
  opacity: $baseOpacity;
  border-radius: 5px;
  img {
    width: 32px;
    height: 32px;
    margin-right: 3px;
  }
}
#arthead {
  height: 40px;
  a {
    margin-left: 0px;
    font-size: 20px;
    font-weight: bold;
    position: relative;
    bottom: 8px;
    transition: 1s;
    color: #1f5480;
  }
  a:hover {
    margin-left: 10px;
    cursor: pointer;
    color: #04091d;
  }
}
#artContent {
  height: 100px;
}
#artFooter {
  height: 40px;
  position: relative;
  span:first-of-type {
    color: #757575;
    font-size: 13px;
    position: absolute;
    bottom: 3px;
    a {
      color: $deepColor;
    }
    a:hover {
      font-weight: bold;
      color: $baseColor;
    }
  }
  span:last-of-type {
    position: absolute;
    display: flex;
    right: 5px;
    bottom: 0px;
    justify-content: right;
    align-items: center;
    height: 16px;
  }
  div {
    margin-right: 5px;
  }
  i {
    width: 18px;
    height: 18px;
  }
}
// #artFooter img:first-of-type {
//   width: 16px;
//   height: 16px;
// }
// #artFooter img:nth-of-type(2) {
//   width: 16px;
//   height: 16px;
//   margin-left: 5px;
// }
// #artFooter img:last-of-type {
//   margin-left: 5px;
//   width: 18px;
//   height: 18px;
// }
</style>
